<template>
  <div class="wrap">
    <div class="flex_cen_cen search">
      <div style="width: 620rpx;margin-right: 20rpx">
        <u-search v-model="params.CustomerName" :input-style="{height: '72rpx'}" :show-action="false" placeholder="请输入顾客姓名进行筛选" />
      </div>
      <Icon name="icon-shaixuan" size="48" @tap="filterRef.change()" />
    </div>
    <div class="list">
      <AutoList :params="params" :request="getCustomDeclarationList" mb="130" @list="getListFn">
        <div
          v-for="d in list"
          :key="d.id"
          class="item"
        >
          <div @tap="goDetailsFn(d.id)">
            <div class="title">
              <span>{{ d.name }}</span>
            </div>
            <div style="padding-right: 16rpx">
              <LabelAndValue :value="d.mobile" height="70" label="顾客手机号" />
              <LabelAndValue :value="d.projectType" height="70" label="意向项目" />
              <LabelAndValue :value="d.sex" height="70" label="性别" />
              <LabelAndValue :value="d.commitTime" height="70" label="提交时间" />
            </div>
          </div>
        </div>
      </AutoList>
    </div>
    <!--  筛选  -->
    <Drawer ref="filterRef">
      <div class="popup_box">
        <div class="popup_title">
          <div>选择筛选条件</div>
          <div class="icon_close" @tap="filterRef.change()">
            <Icon name="icon-shanchu-4" size="30" />
          </div>
        </div>
        <div class="popup_body">
          <div class="popup_name">客户性别</div>
          <div class="flex_sb_cen">
            <div
              v-for="(item, index) in sexOptions"
              :key="index"
              :class="['capsule_btn', sexIndex === index ? 'active' : '']"
              @tap="selectFn('sex', index, item.value)"
            >
              {{ item.label }}
            </div>
          </div>
          <div class="popup_name">意向项目</div>
          <div class="flex_sb_cen flex_wrap">
            <div
              v-for="(item, index) in projectOptions"
              :key="item"
              :class="['capsule_btn', projectIndex === index ? 'active' : '']"
              @tap="selectFn('project', index, item.value)"
            >
              {{ item.label }}
            </div>
          </div>
          <div class="popup_name">提交时间</div>
          <div class="flex_sb_cen">
            <div class="capsule_btn" style="width: 310rpx" @tap="startDateRef.change()">{{ startDate || '开始时间' }}</div>
            <div class="line" />
            <div class="capsule_btn" style="width: 310rpx" @tap="endDateRef.change()">{{ endDate || '截止时间' }}</div>
          </div>
          <div :style="keepBottomSafeDis()" class="flex_sb_cen mt48">
            <Button size="N" type="solid" @confirm="resetFn">重置</Button>
            <Button size="N" @confirm="confirmFn">确定</Button>
          </div>
        </div>
      </div>
    </Drawer>
    <!-- 开始时间 -->
    <Drawer ref="startDateRef" mask>
      <DateSelect title="请选择开始时间" @cancel="startDateRef.change()" @value="startDateFn" />
    </Drawer>
    <!-- 截止时间 -->
    <Drawer ref="endDateRef" mask>
      <DateSelect title="请选择截止时间" @cancel="endDateRef.change()" @value="endDateFn" />
    </Drawer>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import LabelAndValue from '@C/LabelAndValue.vue'
import AutoList from '@C/AutoList.vue'
import { keepBottomSafeDis, Router, storeCommit } from '@U/common'
import { weixinSubscription } from '@U/Auth'
import Button from '@C/Button.vue'
import Icon from '@C/Icon.vue'
import Drawer from '@C/Drawer.vue'
import DateSelect from '@C/DateSelect.vue'
import { getCustomDeclarationList } from './request'
import type { IObjArray } from '@/interface'

// 参数
const params = reactive({
  CustomerName: '',
  Sex: '',
  ProjectType: '',
  StartTime: '',
  EndTime: '',
  State: '1',
})

const goDetailsFn = (id: string) => {
  weixinSubscription()
  storeCommit('tempData', { customerId: id })
  Router.push('declaration_details')
}
// 列表
const list = ref(<IObjArray>[])
const getListFn = (data) => {
  list.value = data
}

const filterRef = ref()
const sexOptions = [
  {
    label: '全部',
    value: '',
  },
  {
    label: '女',
    value: '1',
  },
  {
    label: '男',
    value: '0',
  },
]
const projectOptions = [
  { label: '全部', value: '' },
  { label: '皮肤', value: '0' },
  { label: '美妆', value: '1' },
  { label: '微整', value: '2' },
]
const sexIndex = ref(0)
const projectIndex = ref(0)
let sex = ''
let projectType = ''
const selectFn = (name: string, index: number, value: string) => {
  if (name === 'sex') {
    sex = value
    sexIndex.value = index
  }
  if (name === 'project') {
    projectType = value
    projectIndex.value = index
  }
}
const startDateRef = ref()
const endDateRef = ref()
const startDate = ref('')
const endDate = ref('')
const startDateFn = (date: string) => {
  startDate.value = date
  startDateRef.value.change()
}
const endDateFn = (date: string) => {
  endDate.value = date
  endDateRef.value.change()
}
const resetFn = () => {
  sexIndex.value = 0
  projectIndex.value = 0
  sex = ''
  projectType = ''
  startDate.value = ''
  endDate.value = ''
}
const confirmFn = () => {
  params.Sex = sex
  params.ProjectType = projectType
  params.StartTime = startDate.value
  params.EndTime = endDate.value
  filterRef.value.change()
}
</script>

<style lang="less" scoped>
.wrap {
  height: calc(100vh - 100rpx);
  display: flex;
  flex-direction: column;
  .search {
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    background-color: #fff;
  }
  .list {
    flex: 1 1;
    padding: 20rpx;
  }
  .item {
    background: white;
    border-radius: 24rpx;
    padding-bottom: 14rpx;
    margin-bottom: 28rpx;
    overflow: hidden;
  }
  .title {
    font-size: 32rpx;
    height: 100rpx;
    width: calc(100% - 56rpx);
    margin: auto;
    color: #272727;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 2rpx #e5e5e5;
  }
  .popup_box {
    .line {
      width: 24rpx;
      height: 2rpx;
      background: #CBCCCD;
    }
  }
}
</style>
